<li [class.completed]="todo.completed" [class.editing]="isEditing">
  <div class="view">
      <input class="toggle" type="checkbox" (click)="toggleTodo()" [checked]="todo.completed" />
      <label (dblclick)="startEdit()">{{ todo.title }}</label>
      <button class="destroy" (click)="removeTodo()"></button>
  </div>
  @if (isEditing) {
    <div class="input-container">
        <input #todoInputRef class="edit" id="edit-todo-input"
          [(ngModel)]="title"
          (focus)="handleFocus($event)"
          (blur)="handleBlur($event)"
          (keyup.enter)="updateTodo()" />
        <label class="visually-hidden" htmlFor="edit-todo-input">
          Edit Todo title
        </label>
    </div>
  }
</li>
